<template>
  <div>
    <body>
      <div class="container">
        <div class="slide">
          <div class="image-1"></div>
          <div class="overlay"></div>
          <div class="content">
            <h1 data-title="龙脊梯田">龙脊梯田</h1>
          </div>
        </div>
        <div class="slide">
          <div class="image-2"></div>
          <div class="overlay"></div>
          <div class="content">
            <h1 data-title="洱海">洱海</h1>
          </div>
        </div>
        <div class="slide">
          <div class="image-3"></div>
          <div class="overlay"></div>
          <div class="content">
            <h1 data-title="青海湖">青海湖</h1>
          </div>
        </div>
        <div class="slide">
          <div class="image-4"></div>
          <div class="overlay"></div>
          <div class="content">
            <h1 data-title="呼伦贝尔">呼伦贝尔</h1>
          </div>
        </div>
      </div>
    </body>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
* {
  /* 初始化 */
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  height: 100vh;
  background-color: #1f1f1f;
  /* 溢出隐藏 */
  overflow: hidden;
}
.container {
  width: 100%;
  height: 100%;
  /* 弹性布局 */
  display: flex;
}
.slide {
  /* 相对定位 */
  position: relative;
  /* 自动放大占满剩余空间 */
  flex: 1;
  height: 100%;
  overflow: hidden;
  /* 过渡效果 */
  transition: 1s;
}
.slide .image-1,
.slide .image-2,
.slide .image-3,
.slide .image-4 {
  width: 140%;
  height: 140%;
  /* 绝对定位，默认图片往左移出可视范围 */
  position: absolute;
  left: -140%;
  top: -20%;
  /* 保持原有尺寸比例，裁切长边 */
  background-size: cover;
  /* 定位背景图像为正中间 */
  background-position: center;
  /* 过渡 */
  transition: 1s;
  /* 执行动画：图片进入动画 时长 线性的 停留在最后一帧 */
  animation: imgIn 1.2s linear forwards;
}
/* 遮罩层 */
.slide .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: linear-gradient(to bottom, rgba(20, 20, 20, 0.7), transparent);
  background-size: 100% 200%;
  background-position: 0 0;
  opacity: 1;
  transition: 0.5s;
}
.slide .content {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
/* 黑色标题 */
.slide .content h1 {
  color: #3f3f3f;
  font-size: 48px;
  text-align: center;
  text-shadow: 0 2px 2px #2f2f2f;
  letter-spacing: 5px;
  text-indent: 5px;
  width: 100%;
  height: 65px;
  /* 默认隐藏 */
  opacity: 0;
  transition: 0.5s;
}
/* 黄色标题 */
.slide .content h1::after {
  /* 通过attr函数获取元素的data-title属性值 */
  content: attr(data-title);
  width: 100%;
  /* 默认高度为零，隐藏 */
  height: 0%;
  color: #fff59d;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  transition: 0.85s;
}
.slide > .image-1 {
  background-image: url("../assets/3.jpg");
}
.slide > .image-2 {
  background-image: url("../assets/3.jpg");
}
.slide > .image-3 {
  background-image: url("../assets/3.jpg");
}
.slide > .image-4 {
  background-image: url("../assets/3.jpg");
}
/* 接下来是鼠标悬停的样式改变 */
.slide:hover .image-1,
.slide:hover .image-2,
.slide:hover .image-3,
.slide:hover .image-4 {
  /* 图片变大 */
  transform: scale(1.1);
}
.slide:hover .overlay {
  /* 降低遮罩层的不透明度 */
  opacity: 0.4;
}
.slide:hover .content h1 {
  /* 黑色标题显现并下移 */
  opacity: 1;
  transform: translateY(60px);
}
.slide:hover .content h1::after {
  /* 黄色标题显现 */
  height: 100%;
}

/* 定义动画 */
@keyframes imgIn {
  to {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
  }
}
</style>
